<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <script>
    window.onload = function () {
      let oF = document.getElementById('f1');
      let oBtn = document.getElementById('btn1');

      oBtn.onclick = function () {
        let data = new FormData();

        Array.from(oF.files).forEach(file => {
          data.append('f1', file);
        });

        //
        let oAjax = new XMLHttpRequest();



        //POST
        oAjax.open('POST', `http://localhost:8088/api`, true);

        oAjax.upload.onprogress = function (ev) {
          let oM = document.getElementById('m1');

          oM.value = 100 * ev.loaded / ev.total;
        };

        oAjax.send(data);


        oAjax.onreadystatechange = function () {
          if (oAjax.readyState == 4) {
            if (oAjax.status >= 200 && oAjax.status < 300 || oAjax.status == 304) {
              alert('成功');
            } else {
              alert('失败');
            }
          }
        };
      };
    };
  </script>
</head>

<body>
  <meter id="m1" value="" min="0" max="100" style="width:500px;"></meter><br>
  <input type="file" id="f1" multiple /><br>
  <input type="button" value="提交" id="btn1">
</body>

</html>